<!DOCTYPE html>
<!-- saved from url=(0064)http://www.miaogongzuo.com/xampp/hr/weixin/select_volunteer.html -->
<html class="ui-mobile">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--<base href="http://www.miaogongzuo.com/xampp/hr/weixin/select_volunteer.html">-->
    <base href=".">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>志愿</title>
    <link rel="stylesheet" href="../tool/jquery-mobile/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="../tool/jquery/jquery-1.11.2.min.js"></script>
    <script src="../tool/jquery-mobile/jquery.mobile-1.4.2.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/http.js"></script>
    <style>
        * {
            text-shadow: none;
            font-family: '微软雅黑';
        }

        .qiandao {
            margin-top: 310px;
            text-align: center;
            margin-bottom: 20px;
        }

        #message {
            border-bottom: 1px solid #BBBBBB;
        }

        #message p {
            position: relative;
            font-size: 15px;
            margin-left: 25px;
            line-height: 10px;
        }

        .Resume .left {
            position: absolute;
            padding: 15px;
            left: 15px;
        }

        .Resume img {
            position: absolute;
            width: 16px;
            height: 16px;
            margin-left: 2px;
            margin-top: 18px;;
        }

        .volunteer {
            padding: 10px 0 20px 0;
            background: #eeeeee;
        }

        .volunteer p {
            margin-left: 20px;;
        }

        table {
            width: 90%;
            border-collapse: collapse;
            margin: 0 auto;
        }

        td {
            height: 35px;
            width: 50%;
            border: 1px solid #c0c0c0;
            text-align: center;
        }

        td p {
            margin: 0;
        }

        #overlay {
            display: none;
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            background: #000000;
            opacity: 0.7;
            z-index: 10;
        }

        .delay {
            width: 50%;
            height: 25%;
            background: #ffffff;
            position: fixed;
            top: 25%;
            left: 25%;
            z-index: 1000;
            display: none;
            border-radius: 10px;
            text-align: center;
        }

        .delay p {
            margin-top: 50px;
        }

        .div_reload {
            padding: 10px 0;
            position: relative;
            margin-left: 10px;
        }

        .job_div {
            position: relative;
            margin-bottom: 10px;
        }

        .job_div {
            float: left;
            width: 95%;
            border-radius: 9px;
            background: #ffffff;
            height: 100px;
            margin-left: 10px;
        }

        .job_div:hover {
            background: #ee721a;
            color: #ffffff;
        }

        .add_div {
            font-size: 100px;
            color: #cccccc;
            position: absolute;
            top: -15px;
            left: 10px;
        }

        .click_choose {
            margin-top: 43px;
            margin-left: 80px;
        }

        .click_choose {
            color: #cccccc;
        }

        .div_progress {
            padding: 1px;
            background: #ffffff;
            width: 90%;
            height: 150px;
            margin: 0 auto;
        }

        .span_progress {
            display: block;
            margin: 20px auto;
            width: 92%;
            color: #a9a9a9;
        }

        .span_color {
            color: #00a2df;
        }

        .img {
            position: absolute;
            width: 30px;
            height: 30px;
            top: 0;
        }

        .img1 {
            left: 0%;
        }

        .img2 {
            left: 23%;
        }

        .img3 {
            left: 46%;
        }

        .img4 {
            left: 69%;
        }

        .img5 {
            left: 92%;
        }

        .span {
            position: absolute;
            top: 200%;
            color: #00a2df;
        }

        .span1 {
            left: -2%;
            font-size: 14px;
        }

        .span2 {
            left: 23%;
            font-size: 14px;
        }

        .span3 {
            left: 44%;
            font-size: 14px;
        }

        .span4 {
            left: 69%;
            font-size: 14px;
        }

        .span5 {
            left: 89%;
            font-size: 14px;
        }

        #imgdiv {
            width: 95%;
            margin: 0 auto;
            position: relative;
            /*margin-top: 10%;*/
            height: 15px;
            border-bottom: 1px solid #c0c0c0;
            overflow: visible;
        }

        .modal {
            width: 70%;
            background: #ffffff;
            position: fixed;
            top: 0;
            left: 30%;
            z-index: 1000;
        }

        .table {
            width: 100%;
            font-size: 14px;
            border-collapse: collapse;
        }

        .table td {
            border: 1px solid #EEEEEE;
            padding-left: 20px;
            text-align: left;
            height: 40px;
            font-size: 16px;
            vertical-align: middle;
        }

        .table td:hover {
            background: #ee721a;
            color: #fff;
        }

        .select_chanel {
            position: absolute;
            right: 0px;
            top: 10px;
            width: 80px;
            height: 30px;
            color: #ffffff;
            border-radius: 4px;
            border: none;
            text-align: center;
        }

        .select_chanel:hover {
            background: #ee721a;
            color: #ffffff;
        }

        .sel_project_content {
            text-align: center;
            width: 70%;
            height: 100%
        }

        .select_project {
            padding-top: 10px;
            padding-left: 15px;
            padding-bottom: 10px;
            font-size: 18px;
            text-align: left;
            background: #ee721a;
            color: #ffffff;
        }
    </style>
</head>
<body class="ui-mobile-viewport ui-overlay-a">
<div data-role="page" id="testpage" style="padding: 1px; min-height: 619px; background: rgb(238, 238, 238);"
     data-url="testpage" tabindex="0" class="ui-page ui-page-theme-a ui-page-active">
    <div style="height:43px;background-color:#ee721a;margin-top:-2px;text-align:center;padding:1px">
        <p style="font-size: 18px;color:#FFFFFF;margin-top: 10px;">选择志愿</p>
    </div>


    <div class="sel_project_content modal" style="display:none;">
        <div class="select_project">面试岗位
            <div class="select_chanel">取消</div>
        </div>
        <table class="table select_project_table">
            <tbody id="positionList"></tbody>
        </table>
    </div>

    <div id="message" style="height: 20px;text-align: center">
        <p>
            <span>面试号:</span><span id="interviewNumber" style="color: red;">99</span>
        </p>
    </div>
    <div class="volunteer" >
        <div class="div_reload">请选择面试志愿</div>

        <div class="inclu_div" id="hide3">
            <div class="job_div" id="first">
                <div class="add_div">+</div>
                <div class="click_choose">点击选择面试第一志愿</div>
                <div id="lineUp1"
                     style="float: right;font-size: 14px;margin-top: 15px;margin-right: 10px;color: red"></div>
                <input type="hidden" id="projectId1" name="projectId">
            </div>
        </div>

        <div class="inclu_div" id="hide4">
            <div class="job_div" id="second">
                <div class="add_div">+</div>
                <div class="click_choose">点击选择面试第二志愿</div>
                <div id="lineUp2"
                     style="float: right;font-size: 14px;margin-top: 15px;margin-right: 10px;color: red"></div>
                <input type="hidden" id="projectId2" name="projectId">
            </div>
        </div>

        <div class="inclu_div" id="hide5">
            <div class="job_div" id="third">
                <div class="add_div">+</div>
                <div class="click_choose">点击选择面试第三志愿</div>
                <div id="lineUp3"
                     style="float: right;font-size: 14px;margin-top: 15px;margin-right: 10px;color: red"></div>
                <input id="lineUp" type="hidden" id="projectId3" name="projectId">
            </div>
        </div>
    </div>

    <div class="div_progress" style="float: left;width: 100%">
		<span class="span_progress">
			请在面试现场<span class="span_color">签到</span>，
			根据获得的<span class="span_color">面试号</span>
			依次对所填写的<span class="span_color">志愿</span>进行面试
		</span>
        <div id="imgdiv">
            <img class="img img1" src="../image/signIn_01_03.png" alt=""><span class="span span1">签到</span>
            <img class="img img2" src="../image/signIn_01_03.png" alt=""><span class="span span2">简历</span>
            <img class="img img3" src="../image/signIn_01_03.png" alt=""><span class="span span3">填志愿</span>
            <img class="img img4" src="../image/signIn_01_05.png" alt=""><span class="span span4">面试</span>
            <img class="img img5" src="../image/signIn_01_07.png" alt=""><span class="span span5">到岗</span>
        </div>
    </div>
    <input type="hidden" id="userId">
    <div class="delay"><p>正在处理请稍等...</p></div>
    <div id="overlay"></div>
    <input type="hidden" id="job_div_key" value="">
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var signInfo = JSON.parse(localStorage.getItem("signInfo"));
        $("#interviewNumber").text(signInfo.signNum);
        var number = 1;
        $("#first .click_choose").click(function () {
            number = 1;
            $("#job_div_key").val($(this).attr("id"));
            $("#overlay").show();
            $(".sel_project_content").show();
        });

        $("#second .click_choose").click(function () {
            number = 2;
            $("#job_div_key").val($(this).attr("id"));
            $("#overlay").show();
            $(".sel_project_content").show();
        });

        $("#third .click_choose").click(function () {
            number = 3;
            $("#job_div_key").val($(this).attr("id"));
            $("#overlay").show();
            $(".sel_project_content").show();
        });

        $(".select_chanel").click(function () {
            $("#overlay").hide();
            $(".sel_project_content").hide();
        });

        $("#submit").click(function () {
            window.location.href = common.ctx + "/html/result.html";
        });

        var recruitId = common.locationParams()["recruitId"];
        var delVolunteer = function (id) {
            if(confirm("确定删除志愿?")) {
                http.del({
                    url: common.sctx + '/recruit/deleteVolunteer/' + id + '.do',
                    success: function () {
                        location.reload();
                    },
                    error: function (res) {
                        alert(res.message);
                    }
                });
            }
        };
        var setCurSign = function (volunteers) {
            $.each(volunteers, function (index, volunteer) {
                if (volunteer.number === 1) {
                    $("#hide3").find(".click_choose").html("<span style=\"color:#000\">" + volunteer.companyName + "_" + volunteer.positionName + "</span>");
                    $("#hide3").find(".add_div").html("-");
                    $("#hide3").find(".add_div").click(function () {
                        delVolunteer(volunteer.id);
                    });
                    $("#projectId1").val(volunteer.id);
                    var processTip = "";
                    if (volunteer.status === 1) {
                        var peopelNum = volunteer.lineUpPeopleNum - 1;
                        processTip = peopelNum === 0 ? "您现在排在第一位" : "前面有" + peopelNum + "人排队";
                    } else if (volunteer.status === 2) {
                        processTip = "已安排"
                    } else if (volunteer.status === 3) {
                        processTip = "面试中"
                    } else if (volunteer.status === 4) {
                        processTip = "离场"
                    } else if (volunteer.status >= 10) {
                        processTip = "已面试"
                    }
                    $("#lineUp1").text(processTip);
                }else if (volunteer.number === 2) {
                    $("#hide4").find(".click_choose").html("<span style=\"color:#000\">" + volunteer.companyName + "_" + volunteer.positionName + "</span>");
                    $("#hide4").find(".add_div").html("-");
                    $("#hide4").find(".add_div").click(function () {
                        delVolunteer(volunteer.id);
                    });
                    $("#projectId2").val(volunteer.id);
                    var processTip = "";
                    if (volunteer.status === 1) {
                        var peopelNum = volunteer.lineUpPeopleNum - 1;
                        processTip = peopelNum === 0 ? "您现在排在第一位" : "前面有" + peopelNum + "人排队";
                    } else if (volunteer.status === 2) {
                        processTip = "已安排"
                    } else if (volunteer.status === 3) {
                        processTip = "面试中"
                    } else if (volunteer.status === 4) {
                        processTip = "离场"
                    } else if (volunteer.status >= 10) {
                        processTip = "已面试"
                    }
                    $("#lineUp2").text(processTip);
                }else if (volunteer.number === 3) {
                    $("#hide5").find(".click_choose").html("<span style=\"color:#000\">" + volunteer.companyName + "_" + volunteer.positionName + "</span>");
                    $("#hide5").find(".add_div").html("-");
                    $("#projectId3").val(volunteer.id);
                    $("#hide5").find(".add_div").click(function () {
                        delVolunteer(volunteer.id);
                    });
                    var processTip = "";
                    if (volunteer.status === 1) {
                        var peopelNum = volunteer.lineUpPeopleNum - 1;
                        processTip = peopelNum === 0 ? "您现在排在第一位" : "前面有" + peopelNum + "人排队";
                    } else if (volunteer.status === 2) {
                        processTip = "已安排"
                    } else if (volunteer.status === 3) {
                        processTip = "面试中"
                    } else if (volunteer.status === 4) {
                        processTip = "离场"
                    } else if (volunteer.status >= 10) {
                        processTip = "已面试"
                    }
                    $("#lineUp3").text(processTip);
                }
            })
        };
        var loadPositionList = function () {
            http.get({
                url: common.sctx + '/recruit/getVolunteerInfo/' + recruitId + '.do',
                success: function (data) {
                    setCurSign(data.volunteerList);
                    var selectedId = {};
                    $.each(data.volunteerList, function () {
                        selectedId[this.rcPositionId] = true;
                    });
                    $(".select_project_table").find("tbody").children().remove();
                    $.each(data.positionList, function () {
                        var position = this || {};
                        if (!selectedId[position.id]) {
                            var hasApp = position.hasApp === 1 ? "已预约" : "";
                            var tr = $("<tr></tr>");
                            var td = $("<td></td>").attr("id", position.id);
                            td.append($("<span></span>").addClass("select_span")
                                .html(position.positionName + " <strong style=\"color:#00a2df\">"
                                    + hasApp + "</strong>-" + position.companyName));
                            td.append($("<input></input>").attr("name", "hasApp").attr("type", "hidden").val(this.hasApp));
                            td.append($("<input></input>").attr("name", "name").attr("type", "hidden").val(position.positionName + "-" + position.companyName));
                            td.appendTo(tr);
                            $(".select_project_table").find("tbody").append(tr);
                        }
                    });

                    $(".select_project_table td").click(function () {
                        var projectId = $(this).closest("td").attr("id");
                        var eId = $("#job_div_key").val();
                        var positionName = $(this).closest("td").find("[name=name]").val();
                        http.post({
                            url: common.sctx + '/recruit/addVolunteer/' + recruitId + '.do?positionId=' + projectId + '&number=' + number,
                            success: function () {
                                loadPositionList();
                                $("#" + eId).find(".click_choose").html("<span style=\"color:#000\">" + positionName + "</span>");
                                $("#" + eId).find("[name=projectId]").val(projectId);
                                $("#overlay").hide();
                                $(".sel_project_content").hide();
                            },
                            error: function (res) {
                                if (res.code === -2) {
                                    if (confirm(res.message)) {
                                        window.location.href = common.ctx + "/html/resume.html";
                                    }
                                } else {
                                    alert(res.message);
                                }
                            }
                        });
                    });
                }
            })
        };
        loadPositionList();
    });
</script>

<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
    <h1>loading</h1></div>
</body>
</html>